<script setup>
import {reactive, ref} from "vue";
import {getStatusPickerApi} from '@/service/setting';
import {getSourceTreeApi} from '@/service/source.js';
import {getCategoryListApi} from '@/service/goods.js';
// 导入客资接口
import {getMemberListApi, allocateMemberApi} from "@/service/member";

import {ElMessage} from "element-plus";

// 引入添加客资的组件
import MemberAdd from "./components/member-add.vue";
import MemberDetail from "./components/member-detail.vue";

// 获取分类
const categoryList = ref([]);
const fetchCategoryList = () => {
  getCategoryListApi().then(res => {
    if (res.code === 200) {
      categoryList.value = res.data.list;
    }
  });
};

// 获取意向状态
const statusLit = ref([]);
const fetchStatusList = () => {
  getStatusPickerApi().then(({code, data}) => {
    if (code === 200) {
      statusLit.value = data;
    }
  });
};

// 加载渠道树
const sourceTree = ref([]);
const fetchSourceTree = () => {
  getSourceTreeApi().then(res => {
    sourceTree.value = res.data.tree;
  });
};

import {getOpenedCityListApi} from '@/service/zone.js';

const openedList = ref([]);
// 获取开放的城市列表
const fetchOpenedList = () => {
  getOpenedCityListApi().then(res => {
    if (res.code === 200) {
      openedList.value = res.data.list;
    }
  });
};

// 导入分页组件
import CommonPagination from "@/components/pagination.vue";

const pagination = reactive({
  page: 1,
  limit: 15,
  total: 0,
})


// 设置检索form
const filterForm = ref({
  visit_times: '',
  status: '',
  category_id: '',
  source_id: '',
  city_id: '',
  allocate_date_range:[],
  keyword: "",
});

// 获取客资列表
const fetchList = async () => {
  let params = {
    ...filterForm.value,
    pagination: pagination
  }
  const {data} = await getMemberListApi(params);
  list.value = data.list;
  pagination.total = data.pagination.total;
};

// 显示添加客资抽屉
const memberAddRef = ref(null);
const showAddMember = () => {
  memberAddRef.value.showDrawer();
};

// 初始化客资列表
const list = ref([]);

// 搜索客资
const handleSearch = () => {
  pagination.page = 1;
  fetchList();
};

// 重置搜索条件
const handleReset = () => {
  filterForm.value = {
    visit_times: '',
    status: '',
    category_id: '',
    source_id: '',
    city_id: '',
    upload_id: '',
    allocate_date_range:[],
    keyword: "",
  };
  pagination.page = 1;
  fetchList();
};

// d


// 查看客资详情
const memberDetailRef = ref(null);
const showDetailDrawer = (row) => {
  memberDetailRef.value.openDrawer(row);
};

// 选择客资
const selectedList = ref([]);
const handleSelectionChange = (val) => {
  // 将val中的id提取出来
  selectedList.value = val.map(item => item.id);
};

// 分配客资
import UserDialog from "@/pages/auth/user-dialog.vue";

const userDialogRef = ref(null);
const showShareDialog = () => {

  if (selectedList.value.length === 0) {
    // 提示选择客资
    ElMessage.warning('请选择客资');
    return;
  }

  userDialogRef.value.openDialog();
};

// 分享客资
const handleShare = (data) => {
  console.log(data);

  allocateMemberApi({
    allocate_id: selectedList.value,
    user_id: data
  }).then(res => {
    if (res.code === 200) {
      ElMessage.success(res.msg);
      fetchList();
    } else {
      ElMessage.error(res.msg);
    }
  });
};


onMounted(() => {
  fetchStatusList();
  fetchCategoryList();
  fetchOpenedList();
  fetchSourceTree();
  fetchList();
});
</script>
<template>
  <el-main>
    <div class="toolbar">
      <el-button type="danger" @click="showAddMember">新增客资</el-button>
      <el-select v-model="filterForm.visit_times" placeholder="回访次数" clearable style="width: 100px">
        <el-option v-for="i in 10" :key="i" :label="i" :value="i"/>
      </el-select>

      <el-select v-model="filterForm.status" placeholder="意向" clearable style="width: 100px">
        <el-option v-for="item in statusLit" :key="item.id" :label="item.title" :value="item.id"/>
      </el-select>

      <el-select v-model="filterForm.category_id" placeholder="信息类型" clearable style="width: 100px">
        <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id"/>
      </el-select>

      <el-cascader v-model="filterForm.source_id" :options="sourceTree"
                   :props="{label:'title', value:'id' ,checkStrictly: true, emitPath: false }"
                   placeholder="渠道" clearable
                   style="width: 100px"></el-cascader>

      <el-select v-model="filterForm.city_id" placeholder="城市" clearable style="width: 100px">
        <el-option v-for="item in openedList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-input v-model="filterForm.upload_id" placeholder="上传编号" clearable style="width: 100px"/>
      <el-date-picker v-model="filterForm.allocate_date_range" type="daterange" range-separator="至"
                      start-placeholder="开始日期" end-placeholder="结束日期" style="max-width: 200px"
                      value-format="YYYY-MM-DD" format="YYYY-MM-DD" clearable/>
      <el-input v-model="filterForm.keyword" placeholder="姓名/联系方式" @keyup.enter="handleSearch" clearable
                style="max-width: 120px;"/>
      <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
      <el-button type="danger" @click="handleReset">重置</el-button>
    </div>

    <el-table class="list" :data="list" row-key="id" border stripe style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="操作" width="100" align="center" fixed="left">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="showDetailDrawer(row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="visit_times" label="回访次数" width="100" align="center"/>
      <el-table-column prop="visit_status.title" label="意向" width="100" align="center"/>
      <el-table-column prop="member.category.title" label="信息类型" align="center"/>
      <el-table-column prop="member.contact.name" label="姓名"/>
      <el-table-column prop="member.contact.contact" label="联系方式"/>
      <el-table-column prop="member.city.name" label="城市"/>
      <el-table-column prop="product.event_date" label="婚期"/>
      <el-table-column prop="product.budget" label="预算"/>
      <el-table-column prop="product.table_amount" label="桌数"/>
      <el-table-column prop="member.source.title" label="渠道"/>
      <el-table-column prop="create_time" label="分配时间"/>
    </el-table>

    <div class="pagination">
      <div class="btn-group">
        <el-button type="primary" @click="showShareDialog">分配客资</el-button>
      </div>
      <common-pagination :pagination="pagination" @fetch-list="fetchList"/>
    </div>
    <member-add ref="memberAddRef" @reload="fetchList"/>
    <member-detail ref="memberDetailRef" @reload="fetchList"/>
    <user-dialog ref="userDialogRef" @handleShare="handleShare"/>
  </el-main>
</template>
